<template>
  <div>
    <div class="container">
      <!-- 左侧导航栏区域 -->
      <Tabbar />
      <!-- 左侧导航栏区域 -->
      <!-- 轮播图开始 -->
      <div class="swiper-container banner-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide banner">
            <img class="swiperimg" src="./images/10001.webp" />
          </div>
          <div class="swiper-slide">
            <img class="swiperimg" src="./images/10002.webp" />
          </div>
          <div class="swiper-slide">
            <img class="swiperimg" src="./images/10003.jpg" />
          </div>
          <div class="swiper-slide">
            <img class="swiperimg" src="./images/10004.webp" />
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 左右按钮 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <!-- 轮播图结束 -->
    </div>
    <!-- 首页轮播下方第一块 -->
    <div class="con-body">
      <div class="con-body-left">
        <a href="">
          <img src="./images/10008.png" alt="" />
          <span>保障服务</span>
        </a>
        <a href="">
          <img src="./images/10009.png" alt="" />
          <span>企业团购</span>
        </a>
        <a href="">
          <img src="./images/10010.png" alt="" />
          <span>F码通道</span>
        </a>
        <a href="">
          <img src="./images/10011.png" alt="" />
          <span>米粉卡</span>
        </a>
        <a href="">
          <img src="./images/10012.png" alt="" />
          <span>以旧换新</span>
        </a>
        <a href="">
          <img src="./images/10013.png" alt="" />
          <span>话费充值</span>
        </a>
      </div>
      <div class="con-body-imgs">
        <a href="">
          <img src="./images/10005.jpeg" alt="" />
        </a>
      </div>
      <div class="con-body-imgs">
        <a href="">
          <img src="./images/10006.png" alt="" />
        </a>
      </div>
      <div class="con-body-imgs">
        <a href="">
          <img src="./images/10007.jpg" alt="" />
        </a>
      </div>
    </div>
    <!-- 首页轮播下方第一块 -->
    <!-- 主体内容 -->
    <div class="con-center">
      <!-- 单张大图 -->
      <Streamer />
      <!-- 单张大图 -->
      <TopBar>
        <span class="center-left">手机</span>
      </TopBar>
      <!-- 查看更多下方列表 -->
      <FooterList />
      <!-- 查看更多下方列表 -->
      <!-- 自定义组件，可使用插槽语法 -->
      <HeaderBar>
        <template #left>
          <span>智能穿戴</span>
        </template>
        <template #right>
          <a>热门</a>
          <a>穿戴</a>
        </template>
      </HeaderBar>
      <!-- 自定义组件，可使用插槽语法 -->
      <FooterListTwo />
      <HeaderBar>
        <template #left>
          <span>家电</span>
        </template>
        <template #right>
          <a>热门</a>
          <a>电视影音</a>
        </template>
      </HeaderBar>
      <FooterListThree />
      <HeaderBar>
        <template #left>
          <span>生活电器</span>
        </template>
        <template #right>
          <a>扫地机</a>
          <a>空净</a>
          <a>清洁</a>
          <a>风扇</a>
        </template>
      </HeaderBar>
      <FooterListThree />
      <Streamer />
      <HeaderBar>
        <template #left>
          <span>厨房电器</span>
        </template>
        <template #right>
          <a>净水器</a>
          <a>烟灶</a>
          <a>电饭煲</a>
          <a>微蒸烤</a>
        </template>
      </HeaderBar>
      <FooterListThree />
      <TopBar>
        <span class="center-left">视频</span>
      </TopBar>
      <!-- 视频区域 -->
      <div class="video">
        <div>
          <video src=""></video>
          <p>小米11现场发布会</p>
        </div>
        <div>
          <video src=""></video>
          <p>小米11现场发布会</p>
        </div>
        <div>
          <video src=""></video>
          <p>小米11现场发布会</p>
        </div>
        <div>
          <video src=""></video>
          <p>小米11现场发布会</p>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
  </div>
</template>

<script>
import TopBar from "./components/TopBar.vue";
import Tabbar from "./components/Tabbar.vue";
import Streamer from "./components/Streamer";
import HeaderBar from "./components/HeaderBar.vue";
import FooterList from "./components/FooterList.vue";
import FooterListTwo from "./components/FooterListTwo.vue";
import FooterListThree from "./components/FooterListThree.vue";
import Swiper from "swiper";

import { mapActions } from "vuex";

export default {
  name: "Home",
  components: {
    TopBar,
    Tabbar,
    Streamer,
    HeaderBar,
    FooterList,
    FooterListTwo,
    FooterListThree,
  },
  created() {
    this.getHomeInitData();
  },
  mounted() {
    new Swiper(".banner-container", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      // scrollbar: {
      //   el: ".swiper-scrollbar",
      // },
    });
  },
  methods: {
    ...mapActions("home", ["getHomeInitData"]),
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1226px;
  height: 460px;
  margin: 0 auto;
  position: relative;
  .swiper-button-prev {
    left: 235px;
  }
  .swiper-pagination-bullets {
    left: 500px;
  }
  .swiper-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    --swiper-theme-color: #ff6600;
  }
}
.con-body {
  width: 1226px;
  display: flex;
  justify-content: space-between;
  margin: 14px auto 0;
  .con-body-left {
    width: 234px;
    height: 170px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #5f5750;
    a {
      display: flex;
      width: 70px;
      height: 82px;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      opacity: 0.7;
      &:hover {
        color: #fff;
        opacity: 1;
      }
      img {
        margin-top: 20px;
        margin-bottom: 5px;
        width: 24px;
        height: 24px;
      }
    }
  }
  .con-body-imgs {
    a {
      display: block;
      width: 316px;
      height: 170px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.con-center {
  width: 100%;
  min-width: 1226px;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 20px;
  background-color: #f5f5f5;
  .video {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    div {
      background-color: #fff;
      padding-bottom: 60px;
      video {
        width: 296px;
        height: 180px;
      }
      p {
        margin-top: 30px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        text-align: center;
      }
    }
    div:hover {
      box-shadow: 8px 8px 5px #ccc;
    }
  }
}
.swiperimg {
  width: 100%;
  height: 100%;
}
</style>